<!-- 文件列表组件 license by http://eleadmin.com -->
<template>
  <div class="ele-file-list-group">
    <!-- 网格模式 -->
    <ele-file-grid
      v-if="grid"
      :data="data"
      :icons="icons"
      :selection="checked"
      :checkbox="checkbox"
      :checked="allChecked"
      :indeterminate="indeterminate"
      :total="checked && checked.length"
      :total-text="t('ele.fileList.selectTips', { total: checked.length })"
      :check-all-text="t('ele.fileList.selectAll')"
      @check-all-change="checkAllChange"
      @item-click="onItemClick"
      @item-check-change="itemCheckChange"
    />
    <!-- 表格模式 -->
    <ele-file-table
      v-else
      :data="data"
      :icons="icons"
      :selection="checked"
      :checkbox="checkbox"
      :checked="allChecked"
      :indeterminate="indeterminate"
      :total="checked && checked.length"
      :total-text="t('ele.fileList.selectTips', { total: checked.length })"
      :check-all-text="t('ele.fileList.selectAll')"
      :name-text="t('ele.fileList.fileName')"
      :size-text="t('ele.fileList.fileSize')"
      :time-text="t('ele.fileList.fileTimestamp')"
      :sort="sort"
      :order="order"
      @check-all-change="checkAllChange"
      @item-click="onItemClick"
      @item-check-change="itemCheckChange"
      @sort-change="onSortChange"
    >
      <template #tool="{ item }">
        <slot name="tool" :item="item" />
      </template>
    </ele-file-table>
  </div>
</template>

<script>
  import Locale from 'element-ui/lib/mixins/locale';
  import EleFileGrid from './components/ele-file-grid.vue';
  import EleFileTable from './components/ele-file-table.vue';
  import { icons, smIcons } from './icons.js';

  export default {
    name: 'EleFileList',
    mixins: [Locale],
    components: { EleFileGrid, EleFileTable },
    emits: ['item-click', 'sort-change', 'update:checked'],
    props: {
      // 数据
      data: Array,
      // 选中数据
      checked: Array,
      // 是否网格展示
      grid: {
        type: Boolean,
        default: true
      },
      // 排序字段
      sort: {
        type: [String, Boolean],
        default: false
      },
      // 排序方式
      order: String,
      // 网格模式后缀对应图标
      icons: {
        type: Array,
        default() {
          return icons;
        }
      },
      // 表格模式后缀对应图标
      smIcons: {
        type: Array,
        default() {
          return smIcons;
        }
      }
    },
    computed: {
      // 是否显示复选框
      checkbox() {
        return Array.isArray(this.checked);
      },
      // 是否是全选
      allChecked() {
        return (
          !!this.data?.length && this.checked?.length === this.data?.length
        );
      },
      // 是否是半选
      indeterminate() {
        return this.checked?.length !== this.data?.length;
      }
    },
    methods: {
      /* 全选框点击事件 */
      checkAllChange() {
        if (this.allChecked) {
          this.$emit('update:checked', []);
        } else {
          this.$emit('update:checked', [...(this.data ?? [])]);
        }
      },
      /* 复选框改变 */
      itemCheckChange(item) {
        const index = this.checked?.indexOf(item) ?? -1;
        if (index === -1) {
          // 选中
          this.$emit('update:checked', this.checked?.concat([item]));
        } else {
          // 取消选中
          const cks = this.checked
            ?.slice(0, index)
            .concat(this.checked.slice(index + 1, this.checked.length));
          this.$emit('update:checked', cks);
        }
      },
      /* item点击事件 */
      onItemClick(item) {
        this.$emit('item-click', item);
      },
      /* 排序点击事件 */
      onSortChange(name) {
        if (typeof this.sort === 'string') {
          this.$emit('sort-change', {
            sort: name,
            order:
              this.order && name === this.sort
                ? { asc: 'desc', desc: '' }[this.order]
                : 'asc'
          });
        }
      }
    }
  };
</script>

<style lang="scss">
  /* 复选框对勾 */
  .ele-file-list-group .ele-file-icon-check {
    position: relative;
    display: inline-block;
    box-sizing: border-box;

    &:before {
      content: '';
      width: 9px;
      height: 5px;
      border-left: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(-45deg);
      position: absolute;
      left: 4px;
      top: 5px;
    }
  }
</style>
